import React, { Component, Fragment } from "react";
// antd
import { Button, Tag, message } from "antd";
import { CopyOutlined } from '@ant-design/icons';
import { CopyToClipboard } from 'react-copy-to-clipboard';
// table 组件
import Action from "@c/buttonAction/Index";
import TableComponent from "@c/tableData/Index";
import FaqModal from "./components/FaqModal";

class TaskRecord extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            hover: false,
            // 请求参数
            PageNumber: 1,
            PageSize: 10,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "faqList",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "Q&A内容", 
                        dataIndex: "answer", 
                        key: "answer", 
                        ellipsis: true,
                        render: answer => {
                            return (
                                <span onMouseEnter={()=>this.setState({hover: true})} onMouseLeave={()=>this.setState({hover: false})}>
                                    {this.state.hover ? 
                                    <CopyToClipboard 
                                        text={answer}
                                        onCopy={this.onCopy}>
                                        <CopyOutlined />
                                    </CopyToClipboard> : ''}
                                    {answer}
                                </span>
                            )
                        }
                    },
                    { 
                        title: "消息类型", 
                        dataIndex: "answer_type", 
                        key: "answer_type",
                        width: "12%"
                    },
                    { 
                        title: "关键字", 
                        dataIndex: "keyword", 
                        key: "keyword",
                        render: (rowData) => {
                            return (
                                <div>
                                    {
                                      rowData.split(",").map(index => (
                                        <Tag color='geekblue' key={index}>{index}</Tag>
                                      ))
                                    }
                                </div>
                            )
                        }
                    },
                    { 
                        title: "分类", 
                        dataIndex: "type", 
                        key: "type",
                        width: "10%"
                    },
                    { 
                        title: "创建人", 
                        dataIndex: "creator", 
                        key: "creator",
                        width: "10%"
                    },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        width: "10%",
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.faqModal({status: true, faq_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "问答内容", 
                        name: "answer__contains", 
                        placeholder: "请输入答案模糊搜索"
                    },
                    { 
                        type: "Input",
                        label: "关键字", 
                        name: "keyword__contains", 
                        placeholder: "请输入关键字模糊搜索"
                    },
                    { 
                        type: "Input",
                        label: "创建人", 
                        name: "creator", 
                        placeholder: "请输入邮箱前缀"
                    },
                    { 
                        type: "SelectComponent",
                        label: "分类", 
                        url: "faqTypeList",
                        method: "get",
                        name: "type",
                        propsKey: {
                            label: "type",
                            value: "type"
                        },
                        style: { width: "200px" },
                        placeholder: "请选择分类"
                    },
                ],
                formSearchCol: 18,
                formRightCol: 6,
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 复制
    onCopy  = () => {
        this.setState({copied: true});
        message.success('Copy success！')
    }
    
    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getFaqModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    faqModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig}>
                    <Button type="primary" ref="faqAdd" onClick={() => this.faqModal({ status: true })}>添加</Button>
                </TableComponent>
                <FaqModal onRef={this.getFaqModalRef} />
            </Fragment>
        )
    }
}
export default TaskRecord;